<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<style>
		/* 取消默认样式 */
		* {
			padding: 0;
			margin: 0;
		}
		.container {
			width: 100%;
			height: 591px;
			/* border: 1px solid red; */
			display: flex;
			align-items: center;
			align-content: center;
			flex-wrap: wrap;
			justify-content: space-around;
			background-color: #efeeee;
		}
		.container .box {
			width: 140px;
			height: 140px;
			/* border: 1px solid green; */
			/* 水平居中的方法不是只有margin */
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			flex-direction: column;
		}
		.container .box .img {
			width: 100px;
			height: 100px;
			/* border: 1px solid blue; */
			background-color: #efeeee;
			border-radius: 16px;
			box-shadow: 10px 10px 15px #ccc, -10px -10px 15px rgb(255, 255, 255);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.container .box .img img {
			width: 60px;
			/* height: 60px; */
		}

		.container .box p {
			color: #6c7b8b;
		}

		.container .box .img:hover {
			box-shadow: 2px 2px 5px #ccc, -2px -2px 5px rgb(255, 255, 255),
				inset 10px 10px 15px rgba(0, 0, 0, 0.1),
				inset -10px -10px 15px rgb(255, 255, 255, 0.8);
			transition: 0.2s ease-out;
		}

		.container .box .img:hover img {
			width: 56px;
		}
	</style>
	<body>
		<!-- 最外层的大容器 -->
		<div class="container">
			<!-- 包裹着每个盒子 -->
			<div class="box">
				<div class="img">
					<img src="./images/lz.png" />
				</div>
				<p>录音机</p>
			</div>

			<div class="box">
				<div class="img">
					<img src="./images/wx.png" />
				</div>

				<p>微信</p>
			</div>

			<div class="box">
				<div class="img">
					<img src="./images/rl.png" />
				</div>

				<p>日历</p>
			</div>

			<div class="box">
				<div class="img">
					<img src="./images/sz.png" />
				</div>

				<p>时钟</p>
			</div>

			<div class="box">
				<div class="img">
					<img src="./images/llq.png" />
				</div>

				<p>浏览器</p>
			</div>

			<div class="box">
				<div class="img">
					<img src="./images/dh.png" />
				</div>

				<p>电话</p>
			</div>

			<div class="box">
				<div class="img">
					<img src="./images/xc.png" />
				</div>

				<p>相册</p>
			</div>

			<div class="box">
				<div class="img">
					<img src="./images/xj.png" />
				</div>

				<p>相机</p>
			</div>

			<div class="box">
				<div class="img">
					<img src="./images/dx.png" />
				</div>

				<p>短信</p>
			</div>

			<div class="box">
				<div class="img">
					<img src="./images/txl.png" />
				</div>

				<p>通讯录</p>
			</div>

			<div class="box">
				<div class="img">
					<img src="./images/youtube.png" />
				</div>

				<p>Youtube</p>
			</div>

			<div class="box">
				<div class="img">
					<img src="./images/facebook.png" />
				</div>

				<p>Facebook</p>
			</div>

			<div class="box">
				<div class="img">
					<img src="./images/bibil.png" />
				</div>

				<p>哔哩哔哩动画</p>
			</div>

			<div class="box">
				<div class="img">
					<img src="./images/QQ.png" />
				</div>

				<p>QQ</p>
			</div>
		</div>
	</body>
</html>
